import React from "react";
import {ThemeContext} from './theme-context';

class ThemedButton extends React.Component {
  // Theme Toggler 按钮不仅仅只获取 theme 值，
  // 它也从 context 中获取到一个 toggleTheme 函数
  render() {
    console.log(this.context);
    return (
      <ThemeContext.Consumer>
        {({theme, toggleTheme}) => (
          <button
            onClick={toggleTheme}
            style={{backgroundColor: theme.background}}>
            Toggle Theme
          </button>
        )}
      </ThemeContext.Consumer>
    );
  }
}
ThemedButton.contextType = ThemeContext; // 可以让你使用 this.context 来获取最近 Context 上的值。

export default ThemedButton;
